<template>
    <div class="inform-container">
        <div class="header">
            <div class="badge" v-if="unreadCount > 0">{{ unreadCount }}条未读</div>
        </div>
        <div class="inform">
            <div class="notification-list">
                <div v-for="item in notifications" :key="item.id" class="notification-item"
                    :class="{ unread: !item.read }" @click="showMessageDetail(item)">
                    <div class="notification-icon">
                        <template v-if="item.type === 'order'">
                            <el-icon>
                                <ShoppingCart />
                            </el-icon>
                        </template>
                        <template v-else-if="item.type === 'coupon'">
                            <el-icon>
                                <PriceTag />
                            </el-icon>
                        </template>
                        <template v-else>
                            <el-icon>
                                <Bell />
                            </el-icon>
                        </template>
                    </div>
                    <div class="notification-content">
                        <div class="title">{{ item.title }}</div>
                        <div class="message">{{ item.message }}</div>
                        <div class="time">{{ formatTime(item.createTime) }}</div>
                    </div>
                </div>

                <div v-if="loading" class="loading">加载中...</div>
                <div v-if="!loading && notifications.length === 0" class="empty">暂无通知</div>
            </div>

            <!-- 右侧弹窗 -->
            <div class="message-detail-overlay" v-if="selectedMessage" @click="closeMessageDetail"></div>
            <div class="message-detail" v-if="selectedMessage">
                <div class="message-header">
                    <img :src="selectedMessage.avatar || 'default-avatar.png'" alt="Avatar" class="avatar">
                    <span class="username">{{ selectedMessage.username || '未知用户' }}</span>
                    <span class="time">{{ formatTime(selectedMessage.createTime) }}</span>
                </div>
                <div class="message-content">
                    {{ selectedMessage.message }}
                </div>
                <div class="reply-input">
                    <input type="text" v-model="replyMessage" placeholder="请输入回复消息">
                    <button @click="sendReply">发送</button>
                </div>
            </div>
        </div>
    </div>

</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ShoppingCart, PriceTag, Bell } from '@element-plus/icons-vue'
import informApi from '@/api/inform'
import dayjs from 'dayjs'

interface Notification {
    id: string
    title: string
    message: string
    type: 'order' | 'coupon' | 'system'
    read: boolean
    createTime: string
    avatar?: string
    username?: string
}

const notifications = ref<Notification[]>([])
const unreadCount = ref(0)
const loading = ref(false)

// 新增变量
const selectedMessage = ref<Notification | null>(null)
const replyMessage = ref('')

const showMessageDetail = (item: Notification) => {
    selectedMessage.value = item
    markAsRead(item)
}

const closeMessageDetail = () => {
    selectedMessage.value = null
}

const sendReply = async () => {
    if (!selectedMessage.value || !replyMessage.value) return

    try {
        // 这里模拟回复消息的逻辑，实际应调用后端接口
        console.log(`回复消息: ${replyMessage.value} 到消息ID: ${selectedMessage.value.id}`)
        // 清空回复输入框
        replyMessage.value = ''
    } catch (error) {
        console.error('回复消息失败', error)
    }
}

const fetchNotifications = async () => {
    loading.value = true
    try {
        // 测试数据 - 后端完成后请删除
        notifications.value = [
            {
                id: '1',
                title: '订单支付成功',
                message: '您的订单 #20250722001 已支付成功，金额 ¥99.00',
                type: 'order',
                read: false,
                createTime: '2025-07-22T10:30:00',
                avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
                username: '帅哥'
            },
            {
                id: '2',
                title: '新优惠券可用',
                message: '您获得一张满100减20优惠券，有效期至2025-07-31',
                type: 'coupon',
                read: false,
                createTime: '2025-07-22T09:15:00',
                avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
                username: '美女'
            },
            {
                id: '3',
                title: '系统公告',
                message: '平台将于2025-07-23 2:00-4:00进行系统维护',
                type: 'system',
                read: true,
                avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
                createTime: '2025-07-21T18:00:00'
            },
            {
                id: '4',
                title: '物流更新',
                message: '您的订单 #20250721002 已发货，快递单号：SF123456789',
                type: 'order',
                read: false,
                createTime: '2025-07-21T15:20:00',
                avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
                username: '靓仔'
            }
        ]
        unreadCount.value = notifications.value.filter(item => !item.read).length
    } finally {
        loading.value = false
    }
}

const fetchUnreadCount = async () => {
    // 测试数据 - 后端完成后请删除
    unreadCount.value = notifications.value.filter(item => !item.read).length
}

const markAsRead = async (item: Notification) => {
    if (item.read) return

    try {
        await informApi.markAsRead(item.id)
        item.read = true
        unreadCount.value = Math.max(0, unreadCount.value - 1)
    } catch (error) {
        console.error('标记已读失败', error)
    }
}

const formatTime = (time: string) => {
    return dayjs(time).format('YYYY-MM-DD HH:mm')
}

onMounted(() => {
    fetchNotifications()
    fetchUnreadCount()
})
</script>

<style scoped>
.inform {
    display: flex;
    max-width: 90%;
    margin: 0 auto;
    padding: 20px;
}

.header {
    display: flex;
    margin-left: 10%;
}

.notification-list {
    width: 60%;
    display: block;
    border-radius: 8px;
    overflow: hidden;
}

.notification-item {
    display: flex;
    padding: 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.3s;
}

.notification-item:hover {
    background-color: #fafafa;
}

.notification-item.unread {
    background-color: #f6ffed;
}

.notification-icon {
    margin-right: 16px;
    font-size: 20px;
    color: #1890ff;
}

.notification-content {
    flex: 1;
}

.title {
    font-weight: 500;
    margin-bottom: 4px;
}

.message {
    color: #666;
    margin-bottom: 4px;
}

.time {
    color: #999;
    font-size: 12px;
}

.loading,
.empty {
    text-align: center;
    padding: 20px;
    color: #999;
}

.notification-icon .el-icon {
    font-size: 20px;
}

.message-detail-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.message-detail {
    width: 500px;
    margin-left: 20px;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    padding: 20px;
    position: relative;
    z-index: 1001;
    background-color: white;
    /* 添加背景色白色 */
    height: 700px;
}

.message-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.username {
    font-weight: bold;
}

.time {
    color: #999;
    font-size: 12px;
    margin-left: auto;
}

.message-content {
    margin-bottom: 20px;
}

.reply-input {
    display: flex;
}

.reply-input input {
    flex: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 10px;
}

.reply-input button {
    padding: 8px 16px;
    background-color: #1890ff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.reply-input button:hover {
    background-color: #40a9ff;
}
</style>